<template>
  <div>
    <div class="unmcatyh">

      <div class="cityheder">
        <p class="unmap">选择城市
          <span style="position: absolute;right: 0.5rem;" @click="del">
            <img class="derssimg" style="width: 0.3rem;" src="../../assets/img/desdel.png" />
          </span>
        </p>
        <div>
          <van-steps direction="vertical" :active="5" active-color="red" inactive-color="red">
            <van-step v-for="(item,index) in citynamelist" :key="'cityname'+index">
              <p style="color:red" @click="citychernname(index+1)">{{item}}</p>
            </van-step>

          </van-steps>
        </div>
        <div>
          <van-divider color="#E8E8E8" />
          <div v-show="cityname1show">
            <div class="chern" v-for="(item,index) in cityname1" :key="'cityname1'+index" @click="citychern(item,1)">
              {{item.name}}
            </div>
          </div>

          <div v-show="cityname2show">
            <div class="chern" v-for="(item,index) in cityname2" :key="'cityname2'+index" @click="citychern(item,2)">
              {{item.name}}
            </div>
          </div>
          <div v-show="cityname3show">
            <div class="chern" v-for="(item,index) in cityname3" :key="'cityname3'+index" @click="citychern(item,3)">
              {{item.name}}
            </div>
          </div>
          <div v-show="cityname4show">
            <div class="chern" v-for="(item,index) in cityname4" :key="'cityname4'+index" @click="citychern(item,4)">
              {{item.name}}
            </div>
          </div>
          <div v-show="cityname5show">
            <div class="chern" v-for="(item,index) in cityname5" :key="'cityname5'+index" @click="citychern(item,5)">
              {{item.name}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import UNEMPLOY from '@/api/unemploy'
export default {
  data () {
    return {
      active: 0,
      citynamelist: [],
      cityname1: [],
      cityname2: [],
      cityname3: [],
      cityname4: [],
      cityname5: [],
      cityname1show: true,
      cityname2show: false,
      cityname3show: false,
      cityname4show: false,
      cityname5show: false,
      code: []
    }
  },
  computed: {},
  methods: {
    citytree () {
      UNEMPLOY.citytree().then(res => {
        console.log(res.data)
        if (res.data.success) {
          this.cityname1 = res.data.data
        }
      })
    },
    citychernname (num) {
      if (num === 1) {
        this.cityname1show = true
        this.cityname2show = false
        this.cityname3show = false
        this.cityname4show = false
        this.cityname45how = false
        this.active = 1
      } else if (num === 2) {
        this.cityname1show = false
        this.cityname2show = true
        this.cityname3show = false
        this.cityname4show = false
        this.cityname45how = false

        this.active = 2
      } else if (num === 3) {
        this.cityname1show = false
        this.cityname2show = false
        this.cityname3show = true
        this.cityname4show = false
        this.cityname45how = false

        this.active = 3
      } else if (num === 4) {
        this.cityname1show = false
        this.cityname2show = false
        this.cityname3show = false
        this.cityname4show = true
        this.cityname5show = false
        this.active = 4

      } else {
        this.cityname1show = false
        this.cityname2show = false
        this.cityname3show = false
        this.cityname4show = false
        this.cityname5show = true
        this.active = 5
      }
    },
    del () {
      this.$emit('unmpoydel')
    },
    umplonum (num) {
      this.hunumber = num
    },
    citychern (item, num) {
      if (num === 1) {
        this.cityname1show = false
        this.cityname2show = true
        this.cityname3show = false
        this.cityname4show = false
        this.cityname5show = false
        this.cityname2 = item.childVo
        if (this.citynamelist[0]) {
          this.citynamelist[0] = item.name
          this.code[0] = item.code
        } else {
          this.citynamelist.push(item.name)
          this.code.push(item.code)
        }
        this.active = 1
      } else if (num === 2) {
        this.cityname1show = false
        this.cityname2show = false
        this.cityname3show = true
        this.cityname4show = false
        this.cityname5show = false
        this.cityname3 = item.childVo
        if (this.citynamelist[1]) {
          this.citynamelist[1] = item.name
          this.code[1] = item.code
        } else {
          this.citynamelist.push(item.name)
          this.code.push(item.code)
        }
        this.active = 2
      } else if (num === 3) {
        this.cityname1show = false
        this.cityname2show = false
        this.cityname3show = false
        this.cityname4show = true
        this.cityname5show = false
        this.cityname4 = item.childVo
        if (this.citynamelist[2]) {
          this.citynamelist[2] = item.name
          this.code[2] = item.code
        } else {
          this.citynamelist.push(item.name)
          this.code.push(item.code)
        }
        this.active = 3
      } else if (num === 4) {
        this.cityname1show = false
        this.cityname2show = false
        this.cityname3show = false
        this.cityname4show = false
        this.cityname5show = true
        this.cityname5 = item.childVo
        if (this.citynamelist[3]) {
          this.citynamelist[3] = item.name
          this.code[3] = item.code


        } else {
          this.citynamelist.push(item.name)
          this.code.push(item.code)

        }
        this.$forceUpdate()
        this.active = 4
      } else {
        if (this.citynamelist[4]) {
          this.citynamelist[4] = item.name
          this.code[4] = item.code


        } else {
          this.citynamelist.push(item.name)
          this.code.push(item.code)

        }
        this.$forceUpdate()
        this.$emit('positionon', this.code, this.citynamelist, this.hunumber)
        this.active = 5
      }

    }

  },
  created () {
    this.citytree()
  }
}
</script>

<style scoped>
.unmcatyh {
  background: rgba(0, 0, 0, 0.4);
}
.cityheder {
  position: relative;
  min-height: 100vh;
  overflow: auto;
  margin: 40px 0;
  border: 1px solid #fff;
  background: #fff;
  border-radius: 16px 16px 0 0;
  z-index: 1000;
  text-align: left;
}
.chern {
  height: 1rem;
  margin-left: 20px;
}
.cityheder /deep/ .van-step--vertical {
  height: 1rem;
}
.unmap {
  margin-top: 30px;
  text-align: center;
  position: relative;
}
.cityheder /deep/ [class*="van-hairline"]::after {
  border: none;
}
</style>